<template>
  <div>
    <fieldset>
      <legend class="field-title">流转记录</legend>
      <!-- <el-steps :active="step" finish-status="success">
        <el-step v-for="(item, index) in followData" :key="index" :title="caseState[item.flowStep]" :description="item.createTime"></el-step>
      </el-steps> -->
      <div class="step-list">
        <template v-for="(item, index) in followData">
          <div
            :class="['step-item', item.isNow ? 'step-now' : '']"
            :key="index"
          >
            <div class="step-dot"></div>
            <div class="step-text">
              <p>{{ caseState[item.flowStep] }}</p>
              <p>{{ item.createTime }}</p>
            </div>
            <div class="step-line" v-if="index !== followData.length - 1"></div>
          </div>
        </template>
      </div>
    </fieldset>
  </div>
</template>
<script>
import api from "../api";
import { mapState } from "vuex";
import { CONSTANT_OBJ } from "@/utils/constant";
import { STEP_CONTENT, PRODUCTTYPE, STEP_CONTENT_JYD } from "../js/contant";
export default {
  props: { caseStatus: String },
  data() {
    return {
      step: 0,
      STEP_CONTENT,
      STEP_CONTENT_JYD,
      PRODUCTTYPE,
      followData: [],
      caseState: {},
      productType: ""
    };
  },
  mounted() {
    console.log(this.dicts);
    this.productType = this.$tabParams.productType;
    this.disposeDicts();
   
  },
  methods: {
    // 获取数据
    getData() {
      console.log(this.approvalData.caseId);
      api.getFlowRecordData(this.approvalData.caseId).then(res => {
        const { responseCode, data } = res;
        console.log('-------流转记录数据-------',data);
        if (responseCode === CONSTANT_OBJ.RES_SUCCESS) {
          let result = [];
          let currIndex = data.length - 1;
          if (data.length > 0) {
            switch (this.productType) {
              case PRODUCTTYPE.JYD:
                if (
                  data[currIndex].flowStep === "APPLY_CANCEL" ||
                  data[currIndex].flowStep === "LOAN_COMPLETE" ||
                  data[currIndex].flowStep === "AUDIT_REJECT"
                ) {
                  result = [...data];
                } else {
                  result = [
                    ...data.concat(
                      this.STEP_CONTENT_JYD[data[currIndex].flowStep]
                    )
                  ];
                }
                break;
              case PRODUCTTYPE.JXD:
                if (
                  data[currIndex].flowStep === "APPLY_CANCEL" ||
                  data[currIndex].flowStep === "QUOTA_COMPLETE" ||
                  data[currIndex].flowStep === "AUDIT_REJECT"
                ) {
                  result = [...data];
                } else {
                  result = [
                    ...data.concat(this.STEP_CONTENT[data[currIndex].flowStep])
                  ];
                }
                break;
            }
          } else {
            result = [...this.STEP_CONTENT["NOT"]];
          }
          if (
            data[currIndex].flowStep === "AUDIT_REJECT" &&
            data[currIndex - 1].flowStep === "PRE_AUDIT"
          ) {
            this.$emit("preReject", true);
          } else {
            this.$emit("preReject", false);
          }
          this.followData = [...result] || [];
          this.disposeFlow(result);
          this.followData.forEach((item, index) => {
            if (index === currIndex) {
              item.isNow = true;
            } else {
              item.isNow = false;
            }
          });
          console.log(this.followData);
        }
      });
    },
    disposeDicts() {
      if (this.productType === PRODUCTTYPE.JYD) {
        this.dicts.jyd_case_status.childList.forEach(val => {
          this.caseState[val.dictNo] = val.dictName;
        });
      }
      if(this.productType === PRODUCTTYPE.JXD) {
        this.dicts.case_status.childList.forEach(val => {
          this.caseState[val.dictNo] = val.dictName;
        });
      }
    },
    disposeFlow(list) {
      if (this.productType === PRODUCTTYPE.JYD) {
        let caseStatus = this.dicts.jyd_case_status.childList;
        if (list.length < caseStatus.length) {
          let temp = caseStatus.slice(list.length - 1);
          console.log(temp, "数组缓存");
        }
      } 
      if(this.productType === PRODUCTTYPE.JXD) {
        let caseStatus = this.dicts.case_status.childList;
        if (list.length < caseStatus.length) {
          let temp = caseStatus.slice(list.length - 1);
          console.log(temp, "数组缓存");
        }
      }
    }
  },
  computed: {
    ...mapState({
      approvalData: state => state.approval.approvalData,
      dicts: state => state.common.dicts
    })
  },
  watch: {
    caseStatus() {
      this.getData();
    }
  }
};
</script>

<style lang="less" scoped>
@import "../../../assets/css/global.less";
fieldset {
  width: 80vw;
  padding: 0 10px;
  margin-bottom: 10px;
  border-color: #eeeeee;
  overflow: hidden;
  overflow-x: auto;
}
.field-title {
  color: @theme-color;
}
.step-list {
  width: 80vw;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  box-sizing: border-box;
  padding: 20px 0;
  overflow-x: auto;
  .step-item {
    min-width: 200px;
    display: flex;
    align-items: center;
    flex-flow: column;
    position: relative;
    box-sizing: border-box;
    padding-right: 50px;
    .step-dot {
      width: 10px;
      height: 10px;
      background: #fff;
      border: 1px solid #d96668;
      border-radius: 50%;
      z-index: 10;
      position: relative;
      margin-bottom: 10px;
    }
    .step-text {
      font-size: 12px;
      text-align: center;
      min-height: 35px;
      color: #999999;
    }
    .step-line {
      width: 100%;
      height: 1px;
      position: absolute;
      left: 35%;
      top: calc(10px / 2);
      background: #d96668;
      z-index: 1;
    }
  }
  .step-now {
    .step-dot {
      background: #d9141e;
    }
    .step-text {
      color: #000;
    }
  }
}
</style>
